import React from 'react';
import { Box, Text } from 'ink';
import { ThemeConfig } from '../types';

interface ThinkingBoxProps {
  thinkingContent: string;
  theme: ThemeConfig;
  isActive?: boolean; // 是否正在思考中
  isPersistent?: boolean; // 是否持久显示（默认true）
}

const ThinkingBox: React.FC<ThinkingBoxProps> = ({ 
  thinkingContent, 
  theme, 
  isActive = false,
  isPersistent = true 
}) => {
  // 获取显示内容，优化为更简洁的格式
  const getDisplayContent = () => {
    if (!thinkingContent) return '';
    
    const lines = thinkingContent.split('\n').filter(line => line.trim());
    
    // 如果正在活跃思考，显示最后几行
    if (isActive) {
      const lastLines = lines.slice(-2);
      return lastLines.join('\n').trim();
    }
    
    // 非活跃状态，显示简化的摘要
    const summary = lines.slice(0, 2).join(' ').substring(0, 60);
    return summary + (thinkingContent.length > 60 ? '...' : '');
  };

  const displayContent = getDisplayContent();

  // 如果没有内容且不是持久显示模式，不渲染
  if (!displayContent && !isPersistent) {
    return null;
  }

  return (
    <Box justifyContent="center" marginY={1}>
      <Box 
        flexDirection="column" 
        borderStyle="round" 
        borderColor={isActive ? "cyan" : "gray"}
        paddingX={1}
        width={80}
        opacity={isActive ? 1 : 0.7}
      >
        <Box>
          <Text 
            color={isActive ? "cyan" : "gray"} 
            dimColor={!isActive}
          >
            💭 {isActive ? 'Thinking...' : 'Thought:'}
          </Text>
        </Box>
        {displayContent && (
          <Box height={isActive ? 2 : 1} flexDirection="column">
            <Text 
              color={isActive ? "white" : "gray"} 
              dimColor={!isActive}
            >
              {displayContent.length > 75 
                ? displayContent.substring(0, 75) + '...'
                : displayContent
              }
            </Text>
          </Box>
        )}
        {!displayContent && isPersistent && (
          <Box height={1}>
            <Text color="gray" dimColor>
              思考内容空白
            </Text>
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default ThinkingBox;